<!--
* 方法:Admin-info.vue
* 描述:系统用户添加/编辑组件
* 作者:Jimmy
* 日期:2018-08-04
*/
-->
<style lang="less">
  @import '../../../styles/common.less';
  @import '../system.less';
</style>
<template>
  <Card class="demo-spin-article">
    <p slot="title">
      {{data.label}}用户
    </p>
    <Row class="margin-bottom-15">
      <Button @click="$emit('toggle',{type:'list'})"><Icon type="ios-undo-outline" />
        返回
      </Button>
    </Row>
    <Row>
      <template>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="60">
          <FormItem label="权限组" prop="roleid">
            <Select v-model="formCustom.roleid" style="width:120px">
              <Option v-for="item in roleidlist" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="用户名" prop="username">
            <Input type="text" v-model="formCustom.username" :disabled="username_e"></Input>
          </FormItem>
          <FormItem label="登录密码" prop="password">
            <Input type="text" v-model="formCustom.password"></Input>
          </FormItem>
          <FormItem label="原始密码" v-if="password_y" prop="password_y">
            <Input type="text" v-model="formCustom.password_y"></Input>
          </FormItem>
          <FormItem label="手机号码" prop="mobile">
            <Input type="text" v-model="formCustom.mobile"></Input>
          </FormItem>
          <FormItem label="用户姓名" prop="nickname">
            <Input type="text" v-model="formCustom.nickname"></Input>
          </FormItem>
          <FormItem label="用户性别" prop="gender">
            <RadioGroup v-model="formCustom.gender" type="button">
              <Radio v-for="item in genderlist" :label="parseInt(item.value)" :key="item.id">{{item.name}}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="是否启用" prop="isenable">
            <RadioGroup v-model="formCustom.isenable" type="button">
              <Radio v-for="item in isenablelist" :label="parseInt(item.value)" :key="item.id">{{item.name}}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formCustom')" :loading="formSave">
              <span v-if="!formSave">保存</span><span v-else>保存中</span>
            </Button>
            <Button @click="handleReset('formCustom')" class="margin-left-8">重置</Button>
          </FormItem>
        </Form>
      </template>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </Row>
  </Card>
</template>
<script>
import bus from '@/libs/http/eventBus.js'
export default {
  props: ['data'],
  data () {
    // 添加和编辑开始
    const validateRoleid = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择权限组'))
      } else {
        callback()
      }
    }
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value && this.formType === 'add') {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    const validatePasswordY = (rule, value, callback) => {
      if (!value && this.formType === 'edit' && this.password_y === true) {
        callback(new Error('请输入原始密码'))
      } else {
        callback()
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else {
        callback()
      }
    }
    const validateNickname = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户姓名'))
      } else {
        callback()
      }
    }
    const validateGender = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择用户性别'))
      } else {
        callback()
      }
    }
    const validateIsenable = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择是否启用'))
      } else {
        callback()
      }
    }
    // 添加和编辑结束
    return {
      // 默认开启加载
      spinShow: true,
      // 默认提交状态
      formSave: false,
      // 添加还是编辑
      formType: this.data.type,
      // 添加和编辑开始
      formCustom: {
        roleid: '',
        username: '',
        password: '',
        mobile: '',
        nickname: '',
        gender: '',
        isenable: '',
        id: this.data.id
      },
      // 其他数据
      username_e: false,
      password_y: false,
      roleidlist: '',
      genderlist: '',
      isenablelist: '',
      ruleCustom: {
        roleid: [
          {validator: validateRoleid, trigger: 'change'}
        ],
        username: [
          {validator: validateUsername, trigger: 'change'},
          {min: 2, message: '请输入2-10数字字母组合'},
          {max: 10, message: '请输入2-10数字字母组合'}
        ],
        password: [
          {validator: validatePassword, trigger: 'change'},
          {min: 6, message: '请输入6-16位密码'},
          {max: 16, message: '请输入6-16位密码'}
        ],
        password_y: [
          {validator: validatePasswordY, trigger: 'change'}
        ],
        mobile: [
          {validator: validateMobile, trigger: 'change'},
          {
            type: 'string',
            pattern: /^1\d{10}$/,
            message: '手机号码格式错误',
            trigger: 'change'
          }
        ],
        nickname: [
          {validator: validateNickname, trigger: 'change'}
        ],
        gender: [
          {validator: validateGender, trigger: 'change'}
        ],
        isenable: [
          {validator: validateIsenable, trigger: 'change'}
        ]
      }
      // 添加和编辑结束
    }
  },
  methods: {
    // 信息保存
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 防止多次提交
          this.formSave = true
          // 请求数据保存
          this.formCustom.delLogField = 'password|password_y' // 清除密码记录
          this.$api.admin(this.formCustom, this.formType).then((response) => {
            if (response.code === 200) {
              bus.$emit('loadList', this.formType)
              this.$Message.success(response.msg)
              this.$emit('toggle', {type: 'list'})
            } else {
              this.$Message.error(response.msg)
            }
            this.formSave = false
          }).catch((error) => {
            this.formSave = false
            this.$Message.error(error.message)
          })
        }
      })
    },
    // 清楚表单
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 信息获取
    getInfoData (id) {
      // 读取请求数据
      this.$api.admin({id: id}, this.formType, 'get').then((response) => {
        if (response.code === 200) {
          if (response.data.id) {
            this.formType = 'edit'
            if (window.localStorage.getItem('id') !== '1') {
              this.username_e = true
              this.password_y = true
              this.formCustom.password_y = ''
            }
            this.formCustom.id = response.data.id
            this.formCustom.roleid = response.data.roleid
            this.formCustom.username = response.data.username
            this.formCustom.mobile = response.data.mobile
            this.formCustom.nickname = response.data.nickname
            this.formCustom.gender = response.data.gender
            this.formCustom.isenable = response.data.isenable
          }
          this.roleidlist = response.data.roleidlist
          this.genderlist = response.data.genderlist
          this.isenablelist = response.data.isenablelist
          this.spinShow = false
        } else {
          this.$Message.error(response.msg)
          this.$emit('toggle', {type: 'list'})
        }
      }).catch((error) => {
        this.$Message.error(error.message)
        this.spinShow = false
      })
    }
    // 添加和编辑结束
  },
  created () {
    // 获取信息
    this.getInfoData(this.formCustom.id)
  }
}
</script>
